<template>
  <div class="demo-title">load-more/demo1</div>
  <div class="demo">
    <div class="demo-head">
      <div class="demo-head-item" :class="tabKey==='tabBase' ? 'active' : ''" @click="changTab('tabBase')">基础用法</div>
      <div class="demo-head-item" :class="tabKey==='tabCustom' ? 'active' : ''" @click="changTab('tabCustom')">自定义文案</div>
      <div class="demo-head-item" :class="tabKey==='tabRefresh' ? 'active' : ''" @click="changTab('tabRefresh')">配合下拉刷新</div>
    </div>
    <div class="demo-content">
      <div class="demo-content-item" v-if="tabKey==='tabBase'">
        <LoadMore v-model:loading="stateBase.loading" :has-more="stateBase.hasMore" @load-more="onBaseLoadMore">
          <p v-for="(item) in stateBase.total" :key="item">基础用法 - {{ item }}</p>
        </LoadMore>
      </div>
      <div class="demo-content-item" v-else-if="tabKey==='tabCustom'">
        <LoadMore v-model:loading="stateCustom.loading" :has-more="stateCustom.hasMore" load-more-text="我是有底线的~" load-text="拼命加载..." @load-more="onCustomLoadMore">
          <p v-for="(item) in stateCustom.total" :key="item">自定义文案 - {{ item }}</p>
        </LoadMore>
      </div>
      <div class="demo-content-item" v-else-if="tabKey==='tabRefresh'">
        <LoadMore v-model:loading="stateRefresh.loading" :has-more="stateRefresh.hasMore" @load-more="onRefreshLoadMore">
          <PullRefresh v-model:refreshing="refreshing" @refresh="refreshFun">
            <p v-for="(item) in stateRefresh.total" :key="item">配合下拉刷新 - {{ item }}</p>
          </PullRefresh>
        </LoadMore>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import LoadMore from '@sscd-mobile/load-more'
  import PullRefresh from '@sscd-mobile/pull-refresh'
  const tabKey = ref('tabBase')
  const changTab = (tab: string) => tabKey.value = tab
  // 基础用法
  const stateBase = reactive({
    page: 1,
    total: 10,
    loading: false,
    hasMore: true
  })
  const onBaseLoadMore = () => {
    setTimeout(() => {
      stateBase.page++
      stateBase.total = stateBase.total + 10
      stateBase.loading = false
      if (stateBase.page > 2) stateBase.hasMore = false
    }, 1000)
  }
  // 自定义文案
  const stateCustom = reactive({
    page: 1,
    total: 10,
    loading: false,
    hasMore: true
  })
  const onCustomLoadMore = () => {
    setTimeout(() => {
      stateCustom.page++
      stateCustom.total = stateCustom.total + 10
      stateCustom.loading = false
      if (stateCustom.page > 2) stateCustom.hasMore = false
    }, 1000)
  }
  // 配合下拉刷新
  const stateRefresh = reactive({
    page: 1,
    total: 10,
    loading: false,
    hasMore: true
  })
  const onRefreshLoadMore = () => {
    setTimeout(() => {
      stateRefresh.page++
      stateRefresh.total = stateRefresh.total + 10
      stateRefresh.loading = false
      if (stateRefresh.page > 2) stateRefresh.hasMore = false
    }, 1000)
  }
  const refreshing = ref(false)
  const refreshFun = () => {
    setTimeout(() => {
      refreshing.value = false
      stateRefresh.page = 1
      stateRefresh.total = 10
      stateRefresh.hasMore = true
    }, 1000)
  }
</script>

<style lang="less" scoped>
  .demo {
    background: #fff;
    .demo-head {
      height: 40px;
      background: #eee;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .demo-head-item {
        font-size: 14px;
        &.active {
          font-weight: bold;
          color: #1677ff;
        }
      }
    }
  }
  p {
    padding-left: 12px;
    line-height: 100px;
  }
</style>

<!-- 此处内部使用，无需复制 start -->
<style lang="less">
  .content-item {
    padding-top: 0 !important;
    > .content-item-title {
      display: none;
    }
  }
</style>
<!-- 此处内部使用，无需复制 end -->
